<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta content="email=no" name="format-detection" />
		<title>隐患详情</title>
		<link rel="stylesheet" href="../../css/hui.css" />
		<link rel="stylesheet" href="../../css/s_plus.css" />
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/layout.css" />
		<link rel="stylesheet" href="../../css/choice.css" />
		<script type="text/javascript" src="../../libs/vue.js"></script>
		<script type="text/javascript" src="../../js/jquery.1.9.1.min.js"></script>
		<script type="text/javascript" src="../../js/app/url.js"></script>
		<script type="text/javascript" src="../../libs/hui.js"></script>
		<script type="text/javascript" src="../../js/s_plus.js"></script>
		<script type="text/javascript" src="../../js/md5.js"></script>
		<script type="text/javascript" src="../../js/app/api.js"></script>
		<link rel="stylesheet" href="../../js/control/phoneswipe/photoswipe.css" type="text/css" />
		<script type="text/javascript" src="../../js/control/phoneswipe/photoswipe.min.js" ></script>
		<script type="text/javascript" src="../../js/control/phoneswipe/photoswipe-ui-default.min.js" ></script>


	</head>

	<body>
		<div id="wrapper">
			<header class="f_l maxbox subhead">
				<a class="back" @click="back"><i class="iconfont">&#xe605;</i></a>
				<h1>隐患详情</h1>
			</header>
			<section class="f_l maxbox txt_list">
				
					<p><em>时间：</em>{{risk.createDateStr}}</p>

				<p><em>处理状态：</em>{{showState(risk.state)}}</p>
				<p><em>隐患等级：</em>{{showLevel(risk.level)}}</p>
				<p><em>隐患类型：</em>{{showType(risk.type)}}</p>
				<p><em>影响半径：</em>{{risk.radius}}</p>
				<p><em>隐患地点：</em>
					{{risk.address}}
				</p>
				<p><em>经纬度：</em>
					 <!--"longitude":"113.092545",
        "latitude":"28.196899",-->
					{{risk.resTerminal.longitude}},{{risk.resTerminal.latitude}}  &nbsp; &nbsp; &nbsp;<a @click="nav(risk.resTerminal.latitude,risk.resTerminal.longitude)">导航<i class="iconfont mar_l">&#xe617;</i></a>
				</p>
				
			</section>
			<section class="f_l img_list">
				<ul>
					<li v-for="item in urls"><img class="imgs" @click="showImg($event)"  :src="item" alt="" /></li>
					<!--<li><img class="imgs" src="../../images/map.jpg" alt="" /></li>
    <li><img class="imgs" src="../../images/map.jpg" alt="" /></li>
    <li><img  class="imgs" src="../../images/map.jpg" alt="" /></li>-->
				</ul>
			</section>
			<section class="f_l maxbox block">
				<dl>
					<dt>
      <h2>说明</h2>
    </dt>
					<dd class="txt_show">
						<p>{{risk.content}}</p>
					</dd>
				</dl>
			</section>

		</div>
		
		
		
		<script type="text/javascript" src="../../js/control/phoneswipe/photoswipe.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../js/control/phoneswipe/photoswipe-ui-default.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="../../js/control/phoneswipe/photoswipe.css" type="text/css" />		
		<!-- 以下为 phoneSwipe 插件 dom 复制即可 -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container" style="overflow:visible;">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="关闭"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

		<script>
			
			
		
				function previewImg(index){
					var pswpElement = document.querySelectorAll('.pswp')[0];
					var items = [];
					//获取图片数据并填充近数组
					hui('.imgs').each(function(eimg){
						var imgObj = {src:eimg.getAttribute('src'), w:eimg.naturalWidth, h:eimg.naturalHeight};
						items.push(imgObj);
					});
					var options = {index: index};
					var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
					gallery.init();
				}
			
			
			var sp = new Vue({
				el: "#wrapper",
				data: {
					risk: {},
					urls: []
				},
				methods: {
					nav: function(lat, lng) {
				localStorage.setItem("lat", lat);
				localStorage.setItem("lng", lng);

				console.log("lat---" + lat);
				console.log("lng---" + lng);

				hui.open("/modules/gisTerminal/navigation.html?s=" + apiManage.getNow(), {}, true, {});
			},
					showImg:function(e){
						  var index = $(e.currentTarget).index();
			    			previewImg(index);
					},
					back: function() {
						hui.back();
					},

					address: function() {

					},

					add: function() {
						var timestamp = new Date().getTime();
						hui.open("risk_add.html?date=" + timestamp, {}, true, {});
					},

					geshi: function(param) {
						return formatTime(param);
					},
					showLevel: function(param) {
						// 	 隐患等级 0：一般， 1：严重 2:其他

						if(param == '0') {
							return "一般";
						} else if(param == '1') {
							return "严重";
						} else {
							return "其他";
						}
					},

					showType: function(param) {
						// 数据字典 隐患类型 0：第三方施工 1：违章占压 2：其他
						if(param == '0') {
							return "第三方施工";
						} else if(param == '1') {
							return "违章占压";
						} else {
							return "其他";
						}
					},
					showState: function(param) {
						//处理状态 0未处理 1处理中 2已处理
						if(param == '0') {
							return "未处理";
						} else if(param == '1') {
							return "处理中";
						} else {
							return "已处理";

						}
					},
					gisMap: function() {
						hui.open("inspection_map.html", {}, true, {});
					},

				},
				mounted: function() {
					loadDetail();
				}
			});

			//				loadDetail();
			function loadDetail() {
				hui.loading("");
				var pid = localStorage.getItem("pid");
				var username = localStorage.getItem("username");
				var sec = localStorage.getItem("sec_pwd");
				var time = apiManage.getNow();
				var key = "loginName=" + username + "&passWord=" + sec + "&time=" + time;
				var paramKey = hex_md5(key);
				var jsonParam = JSON.stringify({
					loginName: username,
					time: time,
					key: paramKey
				});
				console.log("jsonParam:  " + jsonParam);
				var path = urlManager.troubleDetail() + "?id=" + pid;

				console.log("path:  " + path);

				$.ajax({
					type: "GET",
					url: path,
					beforeSend: function(request) {
						request.setRequestHeader("loginName", username);
						request.setRequestHeader("time", time);
						request.setRequestHeader("sign", paramKey);
						request.setRequestHeader("Content-Type", "application/text");

					},
					success: function(result) {
						hui.closeLoading();
						console.log("隐患详情:" + JSON.stringify(result));
						sp.risk = result;
						if(result.url!=null){
							sp.urls = result.url.split(",");
						}

					}

				});

			}
		</script>
	</body>

</html>